import * as echarts from "echarts";

const barItemStyle = {
  normal: {
    color: new echarts.graphic.LinearGradient(
      0,
      0,
      0,
      1,
      [
        {
          offset: 0,
          color: "rgba(0,244,255,1)", // 0% 处的颜色
        },
        {
          offset: 1,
          color: "rgba(0,77,167,1)", // 100% 处的颜色
        },
      ],
      false
    ),
    barBorderRadius: [20, 20, 20, 20],
    shadowColor: "rgba(0,160,221,1)",
    shadowBlur: 4,
  },
};

const toolips = {
  trigger: "axis",
  backgroundColor: "rgba(0,0,0,.6)", // 自定义背景颜色
  borderColor: "rgba(255, 255, 255, .16)", // 自定义边框颜色
  textStyle: {
    color: "#4c9bfd", // 自定义文字颜色
    fontSize: 12, // 自定义文字大小
  },
};
const legend = {
  textStyle: {
    color: "#4c9bfd",
    fontSize: 10,
  },
  show: true,
  top: "20",
};
const lineSeries = {
  type: "line",
  smooth: true,
  showSymbol: false,
  // 设置不显示圆点
  itemStyle: { opacity: 0 },
  lineStyle: {
    width: 2, // 设置图例线条的宽度
  },
};
const xAxis = {
  type: "category",
  boundaryGap: true,
  data: [],
  axisTick: {
    show: false,
  },
  axisLabel: {
    interval: 0, //设置文本标签全部显示
    color: "rgba(255,255,255,.6)",
    fontSize: "10",
    rotate: 20, //如果内容重叠最好设置一下旋转，就不会重叠了
  },
  axisLine: {
    show: false,
  },
};
const yAxisLocal = {
  type: "value",
  axisTick: {
    show: false,
  },
  axisLabel: {
    color: "#4c9bfd",
    fontSize: 10,
  },
  axisLine: {
    show: false,
  },
  splitLine: {
    show: true,
    lineStyle: {
      color: "#012f4a",
    },
  },
  nameTextStyle: {
    color: "rgba(255,255,255,.8)",
    fontSize: 9,
  },
};
const grid = {
  top: "20",
  left: "10",
  right: "10",
  bottom: "10",
  show: true,
  borderColor: "transparent",
  borderWidth: 0.5,
  containLabel: true,
};
export default {
  colors: ["#2f89cf", "#0184d5", "#32c5e9", "#60cda0", "#EE6666"],
  legend: legend,
  toolips: toolips,
  grid: grid,
  xAxis: xAxis,
  yAxis: yAxisLocal,
  lineSeries: lineSeries,
  barItemStyle,
};

// 支持4.1 有间隔的
export const getPie = ({
  el,
  echarts,
  colors,
  data,
  title = "总资产",
  radius = ["70%", "80%"],
  center = ["50%", "50%"],
  length = 40,
  length2 = 100,
}) => {
  let myChart = echarts.init(el);
  let color = [
    "#ff4343",
    "#f69846",
    "#f6d54a",
    "#45dbf7",
    "#f69846",
    "#44aff0",
    "#4777f5",
    "#5045f6",
    "#ad46f3",
    "#f845f1",
  ];
  let list = [];
  let total = 0;
  for (let i in data) {
    total += data[i].value;
  }

  let placeHolderStyle = {
    normal: {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      color: "rgba(0, 0, 0, 0)",
      borderColor: "rgba(0, 0, 0, 0)",
      borderWidth: 0,
    },
  };

  let rich = {
    white: {
      align: "center",
      padding: [3, 0],
    },
  };

  for (let i in data) {
    list.push(
      {
        value: data[i].value,
        name: data[i].name,
        itemStyle: {
          normal: {
            borderWidth: 5,
            shadowBlur: 20,
            borderColor: color[i],
            shadowColor: color[i],
            color: color[i],
          },
        },
        label: {
          color: color[i],
        },
      },
      {
        value: total / 30,
        name: "",
        itemStyle: placeHolderStyle,
      }
    );
  }

  let func = (params) => {
    let percent = ((params.value / total) * 100).toFixed(1);
    let name = params.name.replace(/\n/g, "");
    if (params.name !== "") {
      return name + ":" + params.value + "\n{white|" + percent + "%}";
    } else {
      return "";
    }
  };

  let option = {
    backgroundColor: "transparent",
    title: {
      text: title,
      left: "center",
      top: "50%",
      padding: [24, 0],
      textStyle: {
        color: "#fff",
        fontSize: 16,
        align: "center",
      },
    },
    tooltip: {
      ...toolips,
      trigger: "item",
      formatter: "{a} <br/>{b} : {c}亿 ({d}%)",
    },
    legend: {
      selectedMode: false,
      formatter: function () {
        return "{total|" + total + "}";
      },
      data: [data[0].name],
      left: "center",
      top: "center",
      icon: "none",
      align: "center",
      textStyle: {
        color: "#fff",
        fontSize: 16,
        rich: {
          total: {
            color: "#ffc72b",
            fontSize: 20,
            align: "center",
          },
        },
      },
    },
    series: [
      {
        name: "",
        type: "pie",
        clockWise: false,
        startAngle: "90",
        center: center,
        radius: radius,
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "outside",
              formatter: func,
              rich: rich,
            },
            labelLine: {
              length: length,
              length2: length2,
              show: true,
              color: "#00ffff",
            },
          },
        },
        data: list,
        animationType: "scale",
        animationEasing: "elasticOut",
        animationDelay: function (idx) {
          return idx * 50;
        },
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};

// 支持5.1有间隔的，更简练
export const getPie02 = ({
  el,
  tooltips = {},
  data,
  title = "总资产",
  radius = ["70%", "80%"],
  center = ["50%", "50%"],
  length = 40,
  length2 = 100,
  padAngle = 5,
}) => {
  if (!el || !echarts || !data || data.length <= 0) {
    return;
  }
  let myChart = echarts.init(el);
  let color = [
    "#ff4343",
    "#f69846",
    "#f6d54a",
    "#45dbf7",
    "#f69846",
    "#44aff0",
    "#4777f5",
    "#5045f6",
    "#ad46f3",
    "#f845f1",
  ];
  let list = [];
  let total = 0;
  for (let i in data) {
    total += data[i].value;
  }
  let rich = {
    white: {
      align: "center",
      padding: [3, 0],
    },
  };
  for (let i in data) {
    list.push({
      value: data[i].value,
      name: data[i].name,
      itemStyle: {
        normal: {
          borderWidth: 5,
          shadowBlur: 20,
          borderColor: color[i],
          shadowColor: color[i],
          color: color[i],
        },
      },
      label: {
        color: color[i],
      },
    });
  }

  let func = (params) => {
    let percent = ((params.value / total) * 100).toFixed(2);
    let name = params.name.replace(/\n/g, "");
    if (params.name !== "") {
      return name + ":" + params.value + "\n{white|" + percent + "%}";
    } else {
      return "";
    }
  };
  const option = {
    backgroundColor: "transparent",
    title: {
      text: total,
      subtext: title,
      left: "center",
      top: "center",
      padding: [2, 0],
      textStyle: {
        color: "#000",
        fontSize: 20,
        align: "center",
      },
      subtextStyle: {
        top: 16,
        padding: [2, 0],
        color: "#000",
      },
    },
    tooltip: {
      ...toolips,
      trigger: "item",
      formatter: (data) => {
        return `${data.marker}${data.name}：  ${data.value}  (${data.percent}%)`;
      },
      ...tooltips,
    },
    series: [
      {
        type: "pie",
        radius: radius,
        avoidLabelOverlap: false,
        center: center,
        padAngle: padAngle, // 间隔角度
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "outside",
              formatter: func,
              rich: rich,
            },
            labelLine: {
              length: length,
              length2: length2,
              show: true,
              color: "#00ffff",
            },
          },
        },
        data: list,
        animationType: "scale",
        animationEasing: "elasticOut",
        animationDelay: function (idx) {
          return idx * 50;
        },
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};

export const getPieCommom = ({
  el,
  tooltips = {},
  data,
  title = "总资产",
  radius = ["70%", "80%"],
  center = ["50%", "50%"],
  length = 40,
  length2 = 100,
}) => {
  let total = 0;
  for (let i in data) {
    total += data[i].value;
  }
  const myChart = echarts.init(el);
  const option = {
    color: ["#c487ee", "#deb140", "#49dff0", "#034079", "#6f81da", "#00ffb4"],
    title: {
      text: total,
      subtext: title,
      left: "center",
      top: "40%",
      padding: [24, 0],
      textStyle: {
        color: "#ffc72b",
        fontSize: 28,
        align: "center",
      },
      subtextStyle: {
        top: 20,
        padding: [24, 0],
        color: "#fff",
      },
    },
    tooltip: {
      ...toolips,
      trigger: "item",
      formatter: "{a} <br/>{b} : {c}亿 ({d}%)",
    },
    series: [
      {
        name: title,
        type: "pie",
        radius: radius,
        center: center,

        labelLine: {
          normal: {
            length: length,
            length2: length2,
          },
          emphasis: {
            show: true,
          },
        },
        data: data,
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};

export const getPieNew = ({
  el,
  data,
  tooltipFormatter,
  radius = ["0", "80%"],
  center = ["50%", "60%"],
  length = 20,
  length2 = 8,
}) => {
  const myChart = echarts.init(el);
  let tooltip = { ...toolips, trigger: "item" };
  if (tooltipFormatter) {
    tooltip.formatter = tooltipFormatter;
  }
  var option = {
    grid: { ...grid },
    tooltip,
    series: [
      {
        name: "渠道规模",
        type: "pie",
        radius,
        center,
        label: {
          show: true,
          normal: {
            textStyle: {
              color: "#60cda0", // 标签文字颜色
              fontSize: 10,
            },
          },
        },
        labelLine: {
          length,
          length2,
        },
        data,
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};

// 折线堆积图
export const getLineStack = ({
  el,
  data,
  xData,
  colors,
  tooltipFormatter,
  rotate = 0,
}) => {
  let localColors = ["#24aad1", "#732c51", "#f69846", "#EE6666", "#4777f5"];
  let names = data.map((item) => item.name);
  const tooltip = {
    ...toolips,
    formatter(data) {
      let unit = "亿";
      const ret = data.map((item) => {
        return `${item.marker} ${item.seriesName}: ${item.value}${unit}`;
      });
      return `${data[0].name}<br />` + ret.join("<br/>");
    },
  };
  if (colors) {
    localColors = colors;
  }
  if (tooltipFormatter) {
    tooltip.formatter = tooltipFormatter;
  }

  let series = data.map((item) => {
    return {
      ...lineSeries,
      name: item.name,
      stack: "Total",
      areaStyle: {
        opacity: 0.8,
      },
      data: item.value,
    };
  });
  let myChart = echarts.init(el);
  const option = {
    color: localColors,
    tooltip: tooltip,
    legend: {
      ...legend,
      top: "-5",
      data: names,
    },
    grid: {
      top: "20",
      left: "10",
      right: "10",
      bottom: "10",
      show: true,
      borderColor: "transparent",
      borderWidth: 0.5,
      containLabel: true,
    },
    xAxis: [
      {
        ...xAxis,
        boundaryGap: false,
        axisLabel: {
          // interval: 0, //设置文本标签全部显示
          color: "rgba(255,255,255,.6)",
          fontSize: "10",
          rotate: rotate, //如果内容重叠最好设置一下旋转，就不会重叠了
        },
        data: xData,
      },
    ],
    yAxis: [
      {
        ...yAxisLocal,
      },
    ],
    series: series,
  };

  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};

export const getLine = ({
  el,
  data,
  xData,
  axisLabel,
  yAxis,
  tooltipFormatter,
  rotate = 90,
  legendMerge = { show: true },
  gridMerge = {},
}) => {
  let myChart = echarts.init(el);
  let names = data.map((item) => item.name);
  let tooltip = {
    trigger: "axis",
    ...toolips,
  };
  if (tooltipFormatter) {
    tooltip.formatter = tooltipFormatter;
  }
  let series = data.map((item) => ({
    ...lineSeries,
    name: item.name,
    data: item.value,
    yAxisIndex: item.yAxisIndex ? item.yAxisIndex : 0,
  }));
  const option = {
    color: [
      "#2f89cf",
      "#EE6666",
      "#32c5e9",
      "#60cda0",
      "#732c51",
      "#f69846",
      "#EE6666",
      "#4777f5",
    ],
    tooltip: tooltip,
    legend: {
      ...legend,
      top: -1,
      data: names,
      ...legendMerge,
    },
    grid: {
      ...grid,
      top: 40,
      ...gridMerge,
    },
    xAxis: {
      ...xAxis,
      boundaryGap: false,
      axisLabel: {
        // interval: 0, //设置文本标签全部显示
        color: "rgba(255,255,255,.6)",
        fontSize: "10",
        rotate: rotate, //如果内容重叠最好设置一下旋转，就不会重叠了
      },
      ...axisLabel,
      data: xData,
    },
    yAxis: yAxis,
    series: series,
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};
